<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>局部组件</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <hello></hello>
        <create-user></create-user>
    </div>
    <!-- 局部组件 -->
     <template id="createUser">
        <div>
            <h1>新增用户</h1>
            <input type="text" placeholder="请输入用户名"></input>
            <input type="text" placeholder="请输入密码"></input>
            <button>提交</button>
        </div>
    </template>
</body>
</html>
<script type="module">
    import {} from './js/vue.js'
    //创建局部组件
    let hello={
        template: `<div id='hh'>hello</div>`
    }
    //新增用户的局部组件
    let createUser={
        template: '#createUser
		
    }

    let app = new Vue({
        el: '#app',
        data: {
            msg: '局部组件开发'
        }, 
        methods: {
            // 方法
        }, 
        computed: {
            // 计算属性
        },
        watch: {
            // 监听属性

        },
        components: {
            // 局部组件
            hello,createUser
        },
       
    })
</script>